﻿@{
    ViewBag.Title = "TweenCallback";
    Layout = "~/Views/Shared/_EaselPage.cshtml";
}

<h2>Tween Callback</h2>

<canvas id="canvas" width="1000" height="800" style="border: #008000 solid 1px"></canvas>

<script>
    var stage;
    function init() {
        stage = new createjs.Stage(document.getElementById('canvas'));
        createjs.Ticker.addEventListener("tick", handleTick);
        createjs.Ticker.setFPS(60);
        start();
    }
    function handleTick(e) {
        stage.update();
    }
    function start() {
        drawButterflies();
    }
    function drawButterflies() {
        var imgPath = '/Images/butterfly.png';
        butterfly = new createjs.Bitmap(imgPath);
        stage.addChild(butterfly);
        stage.update();
        setTimeout(tweenButterfly, 100);
    }
    function tweenButterfly() {
        createjs.Tween.get(butterfly).to({y:100},1000).call(butterflyGone,[butterfly],this);
    }
    function butterflyGone(butterfly){
        stage.removeChild(butterfly);
    }

    window.onload = function () {
        init();
    }
</script>


